<template>
  <div class="menu-wrapper">
    <ul class="menu">
      <li class="li1 home"><router-link to="/" tag="div">返回主首页</router-link></li>
      <li v-for="(i, index) in menu" :key="index" :class="`li${index+2} ${ $route.path === i.path ? 'current' : '' }`">
        <router-link :to="i.path" tag="div">{{i.name}}</router-link>
      </li>
    </ul>
    <div class="line"></div>
    <div class="red-point"></div>
    <span class="center-point"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { path: '/locationAdvantages', name: '区位优势' },
        { path: '/functionLayout', name: '功能定位' },
        { path: '/interiorOfTheBuilding', name: '建筑实景' },
        { path: '/', name: '高端酒店' },
        { path: '/', name: '甲级办公' },
        { path: '/', name: '高尚住宅' },
      ],
    };
  },
};
</script>

<style lang="stylus" scoped>
  .menu-wrapper
    position absolute
    bottom 50px
    left 50px
    height: 205px
    width 140px
    padding 10px 10px 0px 0px
    background linear-gradient(to right, #fff, transparent)
    overflow hidden
    .menu
      margin-left -5px
      .home
        font-size 16px
        font-weight bold
      .current
        color red!important
      li
        opacity 0
        margin-left 0px
        font-size 14px
        list-style-type none
        text-align left
        margin-bottom 7px
        animation flyTo .7s ease-out
        animation-delay 1s
        animation-fill-mode forwards
        &:hover
          color red
          cursor pointer
      .li2
        animation-delay 1.2s
      .li3
        animation-delay 1.4s
      .li4
        animation-delay 1.6s
      .li5
        animation-delay 1.8s
      .li6
        animation-delay 2s
      .li7
        animation-delay 2.2s
    .line
      position absolute
      bottom 4px
      left -1px
      height 0%
      display inline-block
      animation addHeight 1s linear
      animation-fill-mode forwards
      background-color red
      width 2px
    .red-point
      position absolute
      left -11px
      bottom -10px
      width 22px
      height 22px
      border-radius 50%
      animation redWave 1s infinite linear
      background #e53935
      z-index 0
    .center-point
      position absolute
      left -9px
      bottom -8px
      width 20px
      height 20px
      border-radius 50%
      background-color red
  @keyframes addHeight {
    form {
      height 0
    }
    to {
      height 98%
    }
  }
  @keyframes redWave {
    form {
      transform scale(1)
      opacity 1
    }
    to {
      transform scale(2)
      opacity 0
    }
  }
  @keyframes flyTo {
    from {
      margin-left 100px
      opacity 0
    }
    to {
      margin-left 18px
      opacity 1
    }
  }

</style>
